<!-- 首页 -->
<template>
	<view class="container p-lr16">
		<view>
			<text class="f-w500 f-s20">视频录制</text>
		</view>
		<view class="m-b15 m-t8 f-s14 text-gray">
			<text>请化淡妆录制，客户可查看</text>
		</view>
		<view class="flex flex-wrap justify-between">
			<UploadVideo width="220rpx" height="220rpx" capture="camera" v-model="form.video">
				<view class="upload-image">
					<image src="/static/images/login/video.png" class="width-28" mode="widthFix"></image>
					<text class="m-t8 text-gray f-s12">录制视频</text>
				</view>
			</UploadVideo>
		</view>
		<view class="m-t40">
			<view class="f-s15 text-bold">
				<text>录制要求</text>
			</view>
			<view class="m-t10 text-gray f-s14">
				<text>1.请原相机录制视频</text>
			</view>
			<view class="text-gray f-s14">
				<text>2.请面向镜头并漏出全脸，不可遮挡面部</text>
			</view>
			<view class="text-gray f-s14">
				<text>3.需求录制至少5秒以上</text>
			</view>
		</view>
		<view class="m-t30">
			<view class="f-s15 text-bold">
				<text>录制要求</text>
			</view>
			<view class="text-theme m-t8 f-s14">
				<text>如果颜值与照片/视频差距太大，或浓妆拍摄，有可能无法通过审核</text>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom bg-white">
			<view class="self-btn m-r10" style="background-color: #EBECED;width: 194rpx;" @click="handlePrev">
				<text class="text-black">上一步</text>
			</view>
			<view class="self-btn" style="width: 488rpx;" @click="handleConfirm">
				<text>提交审核</text>
			</view>
		</view>
		<Modal :show.sync="modalShow" :content="`请确定所有信息填写无误后再审核\n提交后无法修改`" cancelText="再看看" confirmText="确认提交"
			@confirm="handleModalConfirm"></Modal>

	</view>
</template>

<script>
	import UploadVideo from '@/components/upload-video'
	import Modal from '@/components/modal'
	import {
		authStepsDetails,
		videoAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			UploadVideo,
			Modal
		},
		data() {
			return {
				modalShow: false,
				form: {
					video: ''
				}
			}
		},
		created() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				authStepsDetails({
					auth_type: 5
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.form.video = auth_detail?.video ?? ''
				})
			},
			handleModalConfirm() {
				this.$modal.loading('信息上传中').then(() => {
					videoAuth(this.form).then(res => {
						this.$modal.closeLoading()
						this.$emit('next', 5)
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handleConfirm() {
				if (!this.validateForm(this.form)) return
				this.modalShow = true
			},
			validateForm(form) {
				if (!form.video) {
					this.$toast('请上传录制视频')
					return false
				}
				return true
			},
			handlePrev() {
				this.$emit('next', 3)
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.video-item-bg {
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.4);
			z-index: 99;
			position: absolute;
			top: 0;
			right: 0;
			pointer-events: none;
			border-radius: 12rpx;
			overflow: hidden;
		}
	}
</style>